import React,{Component} from 'react'
import { Input,Radio,Icon,Modal,Alert,Carousel,Table,InputNumber,Button} from 'antd';
import {BrowserRouter as Router,Route,NavLink,Switch,Prompt,withRouter} from 'react-router-dom'
import * as api from '../api/getshangpinlist'
import cart from './Cart.module.css'
import header from './Header.module.css'

export default class Cart extends Component{
	constructor(props) {
	    super(props)
		this.state={
			list:[],
			value:'',
			arr:[],
			money:0,
		
		}
		this.onChange=this.onChange.bind(this)
		let arr1=[]
		 this.columns = [
		  {
		    title: '商品图片',
		    dataIndex: 'pimg',
				ellipsis:true,
		    render: (pimg,pid) => <img src={pimg} key={pid}/>,
		  },
		  {
		    title: '商品名称',
				ellipsis:true,
		    dataIndex: 'pname',
				
		  },
		  {
		    title: '商品描述',
				ellipsis:true,
		    dataIndex: 'pdesc',
		  },
			{
			  title: '商品价格',
				ellipsis:true,
			  dataIndex:`pprice`,
				
			},
			{
			  title: '商品数量',
				// ellipsis:true,
			  dataIndex: 'pnum',
				render: (pnum,pid) =>{
					return <div key={pid}>
						<InputNumber  defaultValue={pnum} min={1}  onChange={(e)=>this.onChange(e)}/>
					</div>
				}
						
				 
			},
			{
			  title: '小计',
				ellipsis:true,
			  dataIndex:'',
				render: (msg) =>
						{
							this.state.arr.push(msg)
							console.log(this.state.arr)
							let pnum=msg.pnum
							let pprice=msg.pprice
							return <div  >{Number(pnum)*Number(pprice)}</div>
						}
							
						
			},
			{
			  title: '操作',
				ellipsis:true,
			  dataIndex:``,
				render: (pid) =>
						<div>
								<Button type="danger" onClick={()=>this.del(pid)}>删除</Button>
						</div>
			}
			
						
			
		];
		let yy=0
		 this.rowSelection = {
		  onChange: (selectedRowKeys, selectedRows) => {
		    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
				console.log(this.state.arr)
				this.state.arr.map((item)=>{
					yy+=item.pnum*item.pprice
				})
			console.log(yy)
				this.setState({
					money:yy
				})
		  },
		  
		};
			
	}
	del(msg){
		console.log(msg.pid)
		var uid=localStorage.getItem('uid')
		api.getcartdelete({uid:uid,pid:msg.pid}).then(data =>{
			console.log(data)
			alert(data.data.msg)
			window.location.href='/cart'
		})
	}
	tap(){
		window.location.href="/index"
	}
	
	onChange(e) {
	  // console.log(e)
		this.setState({
			value:e
		})
		// console.log(this)
		var uid=localStorage.getItem('uid')
		// api.getcartupdatenum({id:uid}).then(data =>{
		// 	// console.log(data.data.data)
			
		// })
		
		
		
		
	}


	
	render(){
		console.log(this.state.money)
		return(
			<div>
					<div className={cart.tit}>
						<h2 className={cart.h2}>我的购物袋</h2>
						<h3 className={cart.h3}>[共 {this.state.list.length} 件商品]</h3>
					</div>
					<div ref="che">
						<Table rowSelection={this.rowSelection} columns={this.columns} dataSource={this.state.list} />
						<p>总计:{this.state.money}元</p>
					</div>
					
					<div className={cart.main} ref="main">
						
					</div>
					<div className={cart.lun} ref="lun">
						<h1 className={cart.oh1}>猜您喜欢</h1>
						 <Carousel autoplay className={cart.slickslide}>
						 						    <div >
						 						      <h3 className={cart.h3}>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i3/132103910/O1CN01WehKgJ1ekpBNg6FK8_!!0-saturn_solar.jpg_180x180.jpg_.webp"/></dt>
																		<dd>毛衣男2019新款秋冬圆领男士修身韩版潮流个性线衣厚打底针织衫男</dd>
																		<dd>￥143.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/158748311/O1CN01OM8l1g2BGUH5L9Ilj_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>波司登2019新款羽绒马甲女短款宽松秋冬季V领背心马夹</dd>
																		<dd>￥190.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3320114607/TB1cLbDm4naK1RjSZFBXXcW7VXa_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>羽绒棉马甲女2019秋冬新款韩版宽松短款棉袄百搭立领马夹背心外套</dd>
																		<dd>￥69.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i4/1667651824/O1CN01NmtbNn1PLQz91PSvk_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>朗姿女装2019秋冬新款慵懒风半高领短款棉羊毛兔毛混纺针织连衣裙</dd>
																		<dd>￥1308.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
															</h3>
						 						    </div>
						 						    <div>
						 						      <h3 className={cart.h3}>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/196993935/O1CN01vkxFvG1ewH5eZLoQq_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>【温暖节】男装 高级轻型羽绒茄克 419994 优衣库UNIQLO</dd>
																		<dd>￥399.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/196993935/O1CN01jIIxyj1ewH5jCplME_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>【温暖节】男装 无缝羽绒大衣 419990 优衣库UNIQLO</dd>
																		<dd>￥899.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2206423667189/O1CN01SNlOmh22ybs49HCBR_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>爸爸冬装外套中老年人加绒加厚款40皮衣50岁秋冬季中年男装皮夹克</dd>
																		<dd>￥559.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3628603922/O1CN013XZpoR1eqJwTKzYsM_!!2-item_pic.png_180x180.jpg_.webp"/></dt>
																		<dd>蒙口 羽皇冬季羽绒服男加厚保暖男士外套短款鹅绒服2019高端男装</dd>
																		<dd>￥1680.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
															</h3>
						 						    </div>
						 						    <div>
						 						      <h3 className={cart.h3}>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i3/504729396/O1CN01xOsGYX2JHPyJaUADA_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>预售-音儿女装2019冬季新款纯色钉珠拼接立领短款水貂毛皮草外套</dd>
																		<dd>￥8046.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i3/1771485843/O1CN012I8FKV1t28mbOr74Z-1771485843.jpg_180x180.jpg_.webp"/></dt>
																		<dd>TeenieWeenie小熊2019冬季新款女装毛领连帽羽绒服中长款加厚外套</dd>
																		<dd>￥2028.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i3/651856143/O1CN016OnQZq1vFXaqzUFdE_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>预售影儿诗篇冬季女装2019新款小香风撞色边减龄V领貂皮开衫皮草</dd>
																		<dd>￥7900.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2183380830/O1CN01OFwXxj1I0BIpIZ2IE_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>Massimo Dutti 女装 2019秋冬女流行混色织纹长款羊毛大衣</dd>
																		<dd>￥3290.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
															</h3>
						 						    </div>
						 						    <div>
						 						      <h3 className={cart.h3}>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/59815367/O1CN01zjMFkl1pW8FxVZLqf_!!0-saturn_solar.jpg_180x180.jpg_.webp"/></dt>
																		<dd>套头针织衫毛衣韩版Ins宽松厚男士修身潮流情侣秋冬圆领打底衫</dd>
																		<dd>￥143.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i3/118665476/O1CN01S9OsF91qK3QRiuL4V_!!0-saturn_solar.jpg_180x180.jpg_.webp"/></dt>
																		<dd>衬衫男士帅气男装寸衣韩版商务休闲加绒加厚长袖衬衣秋装正装潮流</dd>
																		<dd>￥108.00<span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2092257051/O1CN01YFjrSw21xPCzfXdrn_!!2092257051.jpg_180x180.jpg_.webp"/></dt>
																		<dd>加绒棉衣男冬季chic工装毛领加厚棉袄飞行夹克男士棉服羊羔绒外套</dd>
																		<dd>￥208.00 <span>￥499.00</span></dd>
																	</dl>
																</div>
																<div  className={header.dl}>
																	<dl>
																		<dt><img src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/158748311/O1CN01hnPfKz2BGUH3oGZO2_!!0-item_pic.jpg_180x180.jpg_.webp"/></dt>
																		<dd>波司登男士羽绒服鹅绒短款2019新款时尚工装加厚外套</dd>
																		<dd>￥2199.00<span>￥499.00</span></dd>
																	</dl>
																</div>
															</h3>
						 						    </div>
						 						  </Carousel>
					</div>
				
				
			</div>
		)
	}
	
	componentDidMount(){
		let uid=localStorage.getItem('uid')
		// if(this.state.list){
		// 	this.refs.main.style.display="none"
		// 	this.refs.lun.style.display="none"
		// }
		// else{
		// 	this.refs.main.style.display="block"
		// 	this.refs.lun.style.display="block"
		// }
		api.getcartlist({id:uid}).then(data =>{
			// console.log(data.data.data)
			let arr=data.data.data
			// console.log(arr)
			this.setState({
				list:arr
			})
		})
		
}
}



